<style lang='less' scoped>
.zhuce_data{
    position:relative;
    width: 26vw;
    height: 55vh;
    .zhuce_title{
        position: absolute;
        text-align:center;
        font-weight: 700;
        font-size: 1.5vw;
        top: 5vh;
        width: 26vw;
    }
    .zhuce_neirong{
        position: absolute;
        width: 26vw;
        background: white;
        height: 55vh;
        top:10vh;
    }
    .zhucedata{
        position: absolute;
        width: 18vw;
        top:2vh;
        left: 4vw;
    }
    .el-input__inner{
        height: 2vw;
    }
    .mobile_code{
        height: 2vw;
        width:50%;
    }
    .btverification{
        height: 2vw;
        width:47%;
    }
    .btzhuce{
        height: 2vw;
        width: 100%;
    }
    .blank{
        width: 100%;
    }
    .tishi{
        color: gray;
        font-size: 0.7vw;
        margin-top:-0.5vw;
    }
}
</style>
<template>
    <div class="data">
        <div class="zhuce_title">欢迎申请注册设计师俱乐部会员</div>
        <div class="zhuce_neirong">
            <el-form :model="registerForm" ref="registerForm" class="zhucedata" :rules="rules">
            <el-form-item
                prop="name"
                >
                <el-input class="name"  placeholder="姓名"  v-model="registerForm.name"></el-input>
            </el-form-item>
            <el-form-item
                 prop="identity"
                >
                <el-input class="identity"  placeholder="身份证号码"  v-model="registerForm.identity"></el-input>
            </el-form-item>
            <el-form-item
                 prop="mobile"
                >
                <el-input class="mobile"  placeholder="手机号码"  v-model="registerForm.mobile"></el-input>
            </el-form-item>
            <el-form-item
                 prop="mobile_code"
                >
                <div>
                    <el-input class="mobile_code"  placeholder="验证码"  v-model="registerForm.mobile_code"></el-input>
                    <el-button v-if="is_mobile_code" class="btverification" @click="btverification">获取短信验证码</el-button>
                    <el-button v-if="!is_mobile_code" class="btverification">{{mobile_code_time}}秒</el-button>
                </div>
                
            </el-form-item> 
            <el-form-item
                 prop="bank"
                >
                <el-input class="bank_account"  placeholder="请输入开户银行"  v-model="registerForm.bank"></el-input>
            </el-form-item>
            <el-form-item
                 prop="bank_account"
                >
                <el-input class="bank_account"  placeholder="银行账号"  v-model="registerForm.bank_account"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="btzhuce" type="primary" round @click="btzhuce">申请注册</el-button>
            </el-form-item>
            <div class="tishi">注册后默认密码为身份证后6位。注册成功后请等待后台管理人员审核。如需加急，请联系0763-3292163</div>
        </el-form>
        </div>

    </div>
</template>
<script>
import { registersms ,captchaSms} from '@/request/api';
export default {
    data() {
        return {
            registerForm:{
                name:'',
                identity:'',
                mobile:'',
                mobile_code:'',
                bank:'',
                bank_account:''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户账号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
            },
            bank_options:[
                {
                    value: '1银行',
                    label: '1银行'
                },
                {
                    value: '2银行',
                    label: '2银行'
                },
                {
                    value: '3银行',
                    label: '3银行'
                },
            ],
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                identity: [
                    { required: true, message: '请输入身份证号码', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' }
                ],
                mobile_code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ],
                bank: [
                    { required: true, message: '请选择开户银行', trigger: 'blur' }
                ],
                bank_account: [
                    { required: true, message: '请输入银行账号', trigger: 'blur' }
                ],
            },
            mobile_code_time:0,
            is_mobile_code:true,
            timebiao:'',
        };
    },
    methods: {
        btverification(){

            if(this.registerForm.mobile == ""){
                this.$confirm('请填写手机号')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
            }else{
                captchaSms({
                    scene:"register",
                    mobile:this.registerForm.mobile
                }).then(res => {
                    if(res.ok){
                        this.mobile_code_time = 60;
                        this.is_mobile_code = false;
                    }
                })
            }
            
            
        },
        btzhuce(){
            this.$refs['registerForm'].validate((valid) => {
                if (valid) {
                    registersms(
                        this.registerForm
                    ).then(res => {
                        if(res.ok){
                            this.downzhuce();
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        downzhuce(){
            this.$message({
                message: '恭喜你，账号注册成功',
                type: 'success'
            });
            this.$emit('zhuce',"1");
        },
        timer() {
          window.clearTimeout(this.timebiao);
          if(this.mobile_code_time == 0){
            this.is_mobile_code = true;
          }else{
              this.timebiao = setTimeout(()=>{
                  this.mobile_code_time = this.mobile_code_time - 1;
              },1000)
          }
      },
    },
    watch: {
      mobile_code_time() {
        this.timer();
      },
    },
};
</script>
